<template>
    <div class="layout">
        <Layout>
            <Header :style="{position: 'fixed', width: '100%', zIndex: 1000}">
                <Menu mode="horizontal" theme="light" active-name="1">
                    <div class="layout-logo">
                        <img src="../../imgs/logo.png" width="100" height="30"/>
                    </div>
                    <div class="layout-nav">
                        <MenuItem name="1" to="/index">
                            <Icon type="ios-navigate"></Icon>
                            主页
                        </MenuItem>
                        <MenuItem name="2" to="/latestBlog">
                            <Icon type="ios-keypad"></Icon>
                            最新文章
                        </MenuItem>
                        <MenuItem name="3" to="/projectList">
                            <Icon type="ios-analytics"></Icon>
                            项目列表
                        </MenuItem>
                        <MenuItem name="4" to="/about">
                            <Icon type="ios-paper"></Icon>
                            关于
                        </MenuItem>
                    </div>
                </Menu>
            </Header>
            <Content :style="{margin: '88px 20px 0', background: '#fff', minHeight: '500px'}">
                <router-view></router-view>
            </Content>
            <Footer class="layout-footer-center">鄂ICP备19002519号</Footer>
        </Layout>
    </div>
</template>

<script>
    export default {
      name: 'Main',
      mounted() {
        this.$router.push('/index')
      }
    }
</script>

<style scoped >
    .layout{
        position: relative;
        overflow: hidden;
    }
    .ivu-layout-header {
        background: #ffffff!important;
    }
    .layout-logo{
        width: 100px;
        height: 50px;
        border-radius: 3px;
        float: left;
        position: relative;
        top: 15px;
        left: 20px;
    }
    .layout-nav{
        float: right;
    }
    .ivu-menu-horizontal.ivu-menu-light:after {
        height: 0px;
    }
    .layout-footer-center{
        text-align: center;
    }
    .ivu-layout-sider-trigger {
        background: #ffffff;
        color: #2d8cf0;
    }
</style>
